import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'

function Hooks(props){
	const [count,setCount] = React.useState(props.initVal || 100)//useState作用相当于state
	const [username,setUsername] = React.useState('')
	const myRef = React.useRef()
	
	/* useEffect相当于生命周期函数：
	没有传第二个参数相当于检测所有state，
	[]：不检测任何state，此时相当于componentDidMount
	[count]：只检测count，count发生变化时，第一个参数的方法 （interval），此时相当于componentDidUpdate
	return后的函数：第一个参数的返回的函数，相当于componentWillUnmount
	*/
	function add(){
		setCount(count => count + 1)
	}
	function setFormUsername(e){
		setUsername(username => e.target.value)
	}
	function remove(){
		ReactDOM.unmountComponentAtNode(document.getElementById('root'))
	}
	// 提交
	function submit(){
		alert(username)
	}
	function show(){
		let val = myRef.current.value
		alert(val)
	}
	
	return(
		<div>
			<h2 className="title">当前求和:{count}</h2>
			<button onClick={add}>点我+1</button>
			<button onClick={remove}>卸载</button>
			<label>姓名:	<input type="text" value={username} onChange={setFormUsername}/>
			</label>
			<button onClick={submit}>函数组件输出表单值</button>
			<input type="text" ref={myRef}/>
			<button onClick={show}>输出ref值</button>
		</div>		
	)		
}

export default Hooks